import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import CurveGraph from "./echarts/curve"

interface TabsProps {
  csvData?: any,
  diffState: boolean,
  dateIndex: any
}


export function TabsDemo({ csvData, diffState, dateIndex }: TabsProps) {
  
  return (
    <Tabs defaultValue="account" className="w-[1000px] h-[800px] my-5">
      <TabsList className="grid w-[1600px] grid-cols-12 ">
        {/* <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="1">1</TabsTrigger>
        <TabsTrigger value="2">2</TabsTrigger>
        <TabsTrigger value="3">3</TabsTrigger>
        <TabsTrigger value="4">4</TabsTrigger> */}
        {csvData.title.map((item: any, index: number,) => {
          if (index != 0) {
            return (<TabsTrigger key={index} value={diffState ? `diff_${item}` : item} className="text-ellipsis overflow-hidden text-left">{item}</TabsTrigger>)
          }
          
        })}
      </TabsList>
      {
        csvData.title.map((item: any, index: number,) => {

          return (<TabsContent key={index} value={diffState ? `diff_${item}` : item} className="w-full h-full">
            <Card className="w-full h-full">
              <CardContent className="space-y-2 w-[800px] y-[800px]">
                <CurveGraph date={dateIndex} data={csvData[item]} graphType="curve" container={diffState ? `diff_graph_${item}` : `graph_${item}`} title={csvData.title[0]} />
              </CardContent>
            </Card>
          </TabsContent>)
        })
      }
    </Tabs>
  )
}